<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Text节点</title>
</head>
<body>
<script>
    var div = window.document.createElement("div");

//    对比代码
//    var textnoed = document.createTextNode("lala");
//    div.appendChild(textnoed);

    div.innerHTML = "xiaotiqin";


    document.body.appendChild(div);
    //    对比innerHtml & text节点的区别
    //    text节点和element元素节点一样都是节点，所以要操作节点需要先创建、追加text节点
    //    innerHtml不需要创建节点，可以直接写文本值
</script>


<script>
    var p=document.createElement("p");
    p.className="message";
    p.innerHTML="<b>I love js</b>";
    document.body.appendChild(p);

    var p=document.createElement("p");
    p.className="message";
    var textnode=document.createTextNode("<b>I love js</b>");
    p.appendChild(textnode);
    document.body.appendChild(p);
//    在第一种情况下呈现出的效果是加粗的文本内容

//    而在第二种情况下呈现出的效果是<b>I love js</b>原文本。

//    所以两者的区别在于，innerHTML会将文本中包含的HTML代码实现效果，而createTextNode只是纯粹创造了文本节点，所以返回的效果也就是纯文本内容。
</script>
</body>
</html>